import React, {useState, useEffect} from 'react';
import s from './style.module.less'
import { Cell, Button } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { get,imgUrl } from '@/utils/index.js'

const User = () => {
  const [user, setUser] = useState({});
  const navigate = useNavigate()

  useEffect(() => {
    getUserInfo()
  }, []);

  const getUserInfo = async() => {
    const { data } = await get('/api/user/get_userinfo')
    console.log(data);
    setUser(data)
  }

  const logout = () => {
    localStorage.removeItem('token')
    navigate('/login')
  }

  return (
    <div className={s.user}>
      <div className={s.head}>
        <div className={s.info}>
          <span>昵称：{user.username}</span>
          <span>
            <img style={{ width: 30, height: 30, verticalAlign: '-10px' }} src="//s.yezgea02.com/1615973630132/geqian.png" alt="" />
            <b>{user.signature || '暂无内容'}</b>
          </span>
        </div>
        <img className={s.avatar} style={{ width: 60, height: 60, borderRadius: 8 }} src={user.avatar} alt="" />
      </div>
      <div className={s.content}>
        <Cell
          isLink
          title="用户信息修改"
          onClick={() => navigate('/userinfo')}
          icon={<img style={{ width: 20, verticalAlign: '-7px' }} src="//s.yezgea02.com/1615974766264/gxqm.png" alt="" />}
        />
        <Cell
          isLink
          title="重制密码"
          onClick={() => navigate('/account')}
          icon={<img style={{ width: 20, verticalAlign: '-7px' }} src="//s.yezgea02.com/1615974766264/zhaq.png" alt="" />}
        />
        <Cell
          isLink
          title="关于我们"
          onClick={() => navigate('/about')}
          icon={<img style={{ width: 20, verticalAlign: '-7px' }} src="//s.yezgea02.com/1615975178434/lianxi.png" alt="" />}
        />
      </div>
      <Button className={s.logout} block type="danger" onClick={logout}>退出登录</Button>
    </div>
  );
}

export default User;